<script setup>
import { reactive, toRefs, ref, onBeforeMount, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { object2List, deleteTableRow, list2Object } from "../../utils/utils";
import { updateNodeHandler as updateHandler } from "../../api/node";

const data = reactive({
  itemForm: {
    spec: {
      taints: [],
    },
  },
  labelList: [],
  taintOptions: [
    {
      value: "NoSchedule",
      label: "禁止调度",
    },
    {
      value: "NoExecute",
      label: "驱逐",
    },
    {
      value: "PreferNoSchedule",
      label: "尽量不调度",
    },
  ],
});
const props = defineProps({
  itemForm: {
    type: Object,
  },
  clusterId: {
    type: String,
  }
});
const emits = defineEmits(["rollback"]);
const itemFormRef = ref();

const loading = ref(false);
const clear = () => {
  itemFormRef.value.resetFields();
};


onMounted(() => {
  // data.itemForm=props.itemForm
  // const jsonString = JSON.stringify(props.itemForm)
  // data.itemForm = JSON.parse(jsonString)
  data.itemForm = JSON.parse(JSON.stringify(props.itemForm));
  // 把节点标签的对象转成List
  data.labelList = object2List(data.itemForm.metadata.labels);
});

const submit = () => {
  loading.value = true;
  // 把labelList转成对象
  const labelObj = list2Object(data.labelList);
  // 把label对象赋值给itemForm
  data.itemForm.metadata.labels = labelObj;
  console.log("clusterId:",props.clusterId)
  console.log("data.itemForm.metadata.name:",data.itemForm.metadata.name)
  console.log("data:",data.itemForm)
  updateHandler(props.clusterId, data.itemForm.metadata.name, data.itemForm).then((response) => {
    ElMessage({
      message: response.data.message,
      type: "success",
    });
    loading.value = false;
    emits('rollback', props.clusterId);
  });
};

const addLabelRow = () => {
  const labelRow = {
    key: "",
    value: "",
  };
  // 在列表后面添加数据
  // data.labelList.push(labelRow)
  // 在列表前面添加数据
  data.labelList.unshift(labelRow);
};

const addTaintRow = () => {
  const taintRow = {
    key: "",
    value: "",
    effect: "NoSchedule",
  };
  // 在列表后面添加数据
  // data.labelList.push(labelRow)
  // 在列表前面添加数据
  data.itemForm.spec.taints.unshift(taintRow);
};

// 使用 toRefs 函数确保解构出来的 itemForm 仍然是响应式的引用，这样在组件中可以直接使用 itemForm.value 来访问和操作对应的属性值。
const { itemForm, labelList, taintOptions } = toRefs(data);
console.log("item:", data.itemForm);
console.log("item123:", itemForm);
</script>

<template>
  <el-form
    label-width="140px"
    ref="itemFormRef"
    :model="itemForm"
    v-loading="loading"
  >
    <div>
      <el-tabs>
        <el-tab-pane label="标签配置">
          <el-table border :data="labelList" style="width: 100%">
            <el-table-column align="center" prop="key" label="Key" width="180">
              <template #default="scope">
                <el-input
                  v-model="scope.row.key"
                  placeholder="请输入标签的key"
                />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="value"
              label="Value"
              width="180"
            >
              <template #default="scope">
                <el-input
                  v-model="scope.row.value"
                  placeholder="请输入标签的value"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" fixed="right">
              <template #header>
                <el-button link type="primary" @click="addLabelRow"
                  >添加</el-button
                >
              </template>
              <template #default="scope">
                <el-button
                  link
                  type="warning"
                  @click="deleteTableRow(labelList, scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="污点配置">
          <el-table border :data="itemForm.spec.taints" style="width: 100%">
            <el-table-column align="center" prop="key" label="Key" width="180">
              <template #default="scope">
                <el-input
                  v-model="scope.row.key"
                  placeholder="请输入污点的key"
                />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="value"
              label="Value"
              width="180"
            >
              <template #default="scope">
                <el-input
                  v-model="scope.row.value"
                  placeholder="请输入污点的value"
                />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="effect"
              label="Effect"
              width="180"
            >
              <template #default="scope">
                <el-select v-model="scope.row.effect" placeholder="Select">
                  <el-option
                    v-for="item in taintOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </el-table-column>

            <el-table-column align="center" fixed="right">
              <template #header>
                <el-button link type="primary" @click="addTaintRow"
                  >添加</el-button
                >
              </template>
              <template #default="scope">
                <el-button
                  link
                  type="warning"
                  @click="deleteTableRow(itemForm.spec.taints, scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <span style="display: block; margin-top: 20px" class="span-button">
      <el-button @click="submit()" type="primary"> 更新 </el-button>
    </span>
  </el-form>
</template>

<style scoped>
.form-item {
  width: 400px;
  margin: 20px auto;
}
.cluster-info {
  display: flex;
  flex-direction: row;
}
</style>